<template>
  <a-card :bordered="false" title="">
    <a-form-item help="请输入IP，多个以换行分割" v-if="editable">
      <a-textarea
        v-model="text"
        placeholder="请输入..."
        :auto-size="{ minRows: 5 }"
      />
    </a-form-item>
    <ul class="" v-else>
      <li v-for="item in all" :key="item.id">{{ item.ip }}</li>
    </ul>
    <div class="mt-6">
      <a-button type="" icon="edit" @click="editable = true"> 编辑 </a-button>
      <a-button class="ml-4" type="primary" icon="save" @click="save">
        保存
      </a-button>
    </div>
    <!-- <this-table ref="table" @on-edit="openModal" @on-add="onAdd" /> -->
    <!-- <edit-modal ref="edit-modal" @refresh="refresh" /> -->
    <!-- <add-modal ref="add-modal" @refresh="refresh" /> -->
  </a-card>
</template>

<script>
// import thisTable from './table'
// import editModal from './modal-edit.vue'
// import addModal from './modal-add.vue'

export default {
  // components: { editModal, addModal },
  data() {
    return {
      editable: false,
      all: [],
      text: '',
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    fetch() {
      this.axios.get('/s/whitelist?type=login').then((res) => {
        this.all = res.data.data
        this.text = this.all.map((item) => item.ip).join('\n')
      })
    },
    save() {
      let list = this.text
        .split(/[(\r\n)\r\n]+/)
        .map((item) => item.trim())
        .filter((item) => item)
      this.axios.post('/s/whitelist', { list, type: 'login' }).then((res) => {
        // console.log(res)
        if (res.data.code === 1) {
          this.fetch()
          this.$message.success('保存成功')
          this.editable = false
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
  },
}
</script>

